<template>
  <div class="ol-map" :id="id">
    <div>
      <v-layout>
        <v-btn @click="clickMap" color="info">点地图</v-btn>
        <v-btn @click="test" color="info">增加测试图</v-btn>

      </v-layout>
    </div>
  </div>
</template>

<script>
  const ol = require('openlayers');
  require('openlayers/dist/ol.css');
  import {
    tian_di_tu_bgmap,
    tian_di_tu_annotation,
    tian_di_tu_satellite_layer, mousePositionControl,
  } from '../../mockDB';


  var zoom = {
    required: false,
    type: Number,
    default: 10
  };


  var image = new ol.style.Circle({
    radius: 5,
    fill: null,
    stroke: new ol.style.Stroke({color: 'red', width: 1})
  });

  var styles = {
    'Point': new ol.style.Style({
      image: image
    }),
    'LineString': new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: 'green',
        width: 1
      })
    }),
    'MultiLineString': new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: 'green',
        width: 1
      })
    }),
    'MultiPoint': new ol.style.Style({
      image: image
    }),
    'MultiPolygon': new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: 'yellow',
        width: 1
      }),
      fill: new ol.style.Fill({
        color: 'rgba(255, 255, 0, 0.1)'
      }),
    }),
    'Polygon': new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: 'blue',
        lineDash: [4],
        width: 3
      }),
      fill: new ol.style.Fill({
        color: 'rgba(0, 0, 255, 0.1)'
      })
    }),
    'GeometryCollection': new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: 'magenta',
        width: 2
      }),
      fill: new ol.style.Fill({
        color: 'magenta'
      }),
      image: new ol.style.Circle({
        radius: 10,
        fill: null,
        stroke: new ol.style.Stroke({
          color: 'magenta'
        })
      })
    }),
    'Circle': new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: 'red',
        width: 2
      }),
      fill: new ol.style.Fill({
        color: 'rgba(255,0,0,0.2)'
      })
    })
  };


  var styleFunction = function (feature) {
    return styles[feature.getGeometry().getType()];
  };


  export default {
    name: "XingZheng",
    props: {
      lat: {
        required: false,
        type: Number
      },
      lon: {
        required: false,
        type: Number
      },
      zoom: zoom
    },
    data() {
      return {
        map: {
          type: Object,
          default: {}
        },
        selectName: {
          type: String,
          name: ""
        }
      }
    }, methods: {
      clickMap: function () {
        var select = new ol.interaction.Select();
        this.map.addInteraction(select);
        select.on('select', function (e) {
          const oneData = e.selected[0];
          const featureName = oneData.getProperties().name;
          console.log(oneData.N);
          alert("点选内容是:    " + featureName);
        });
      },

      test: function () {


        var geojsonObject = {
          'type': 'FeatureCollection',
          'crs': {
            'type': 'name',
            'properties': {
              'name': 'EPSG:3857'
            }
          },
          'features': [
            {
              'type': 'Feature',
              'properties': {
                "objectid": 223,
                "area": 9.277,
                "perimeter": 26.825,
                "bou2_4m_": 224,
                "bou2_4m_id": 33,
                "adcode93": 330000,
                "adcode99": 330000,
                "name": "浙江省",
                "shape_leng": 26.8251103836,
                "shape_area": 9.2767510645
              },
              'geometry': {
                'type': 'MultiPolygon',
                'coordinates': [
                  [[[-5e6, 6e6], [-5e6, 8e6], [-3e6, 8e6], [-3e6, 6e6]]],
                ]
              }
            },
          ]
        };

        var vectorSource = new ol.source.Vector({
          features: (new ol.format.GeoJSON()).readFeatures(geojsonObject)
        });

        vectorSource.addFeature(new ol.Feature(new ol.geom.Circle([5e6, 7e6], 1e6)));

        var vectorLayer = new ol.layer.Vector({
          source: vectorSource,
          style: styleFunction
        });

        this.map.addLayer(vectorLayer);

      },
    },
    mounted() {
      this.map = new ol.Map({
        target: this.id,
        // 图层
        layers: [
          // new ol.layer.Tile({
          //   source: new ol.source.OSM()
          // }),
        ],
        // 视图
        view: new ol.View(
          {
            center: [0, 0],
            zoom: 2


          }),
        // 控件
        controls: [
          new ol.control.FullScreen(), //全屏控件
          new ol.control.ScaleLine(), //比例尺
          mousePositionControl,
        ],
      })


    }, computed: {
      id() {
        return this.$options.name + '-' + this._uid
      },
    },

  };
</script>

<style scoped>

</style>
